<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2023-07-22
  Time: 9:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.6.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/homework_styles.css">
</head>
<body>
这是一个主界面,欢迎你,${sessionScope.user.name}
    <table border="1px solid blue" style="border-collapse: collapse">
        <thead>
            <tr>
                <td>序号</td>
                <td>编号</td>
                <td>部门名</td>
                <td>所在地</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody id="my_body">
            <c:forEach var="dept" items="${deptList}" varStatus="status">
                <tr>
                    <td>${status.count}</td>
                    <td>${dept.deptno}</td>
                    <td>${dept.dname}</td>
                    <td>${dept.loc}</td>
                    <td>
                        <button onclick="updateDept('${dept.deptno}','${dept.dname}','${dept.loc}')">编辑</button>
                        <button onclick="delDept(${dept.deptno})">删除</button>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
    <button id="pre_btn">上一页</button>
    <span id="cur_page">1</span>
    <button id="next_btn">下一页</button>
    跳转至<input id="to_page" type="tetx">页<button id="to_btn">跳转</button>
    <button id="create_new_btn">新建</button>

    <!-- 新建的弹窗 -->
    <div class="overlay" id="popupOverlay">
        <div class="popup">
            <h2>新建部门</h2>
            <label for="deptNo">编号:</label>
            <input type="text" id="deptNo" required><br>
            <label for="deptName">部门名:</label>
            <input type="text" id="deptName" required><br>
            <label for="deptLoc">所在地:</label>
            <input type="text" id="deptLoc" required><br>
            <button id="saveBtn">保存</button>
            <button id="cancelBtn">取消</button>
            <button id="clearBtn">清空</button> <!-- 新增清空按钮 -->
        </div>
    </div>

    <!-- 编辑的弹窗 -->
    <div class="overlay" id="updateOverlay">
        <div class="popup">
            <h2>编辑部门</h2>
            <label for="deptNo">编号:</label>
            <input type="text" id="updateDeptno" required><br>
            <label for="deptName">部门名:</label>
            <input type="text" id="updateDname" required><br>
            <label for="deptLoc">所在地:</label>
            <input type="text" id="updateLoc" required><br>
            <button id="OverlayUpdateBtn">修改</button>
            <button id="OverlayCancleBtn">取消</button>
            <button id="OverlayRestoreBtn">恢复原数据</button>
            <button id="OverlayClearBtn">清空</button> <!-- 新增清空按钮 -->
        </div>
    </div>

</body>
    <script>
        var currentPage=1;//当前的页数
        var pageCount=6;//每页显示的记录数
        $("#pre_btn").on("click",function (){
            if(currentPage==1){
                alert("已经是第一页了")
            }else{
                currentPage--;
                getDataByPage();
                $("#cur_page").html(currentPage);
            }
        });

        $("#to_btn").on("click",function (){
            currentPage=$("#to_page").val();
            getDataByPage();
            $("#cur_page").html(currentPage);

        });
        $("#next_btn").on("click",function (){
            currentPage++;
            getDataByPage();
            $("#cur_page").html(currentPage);
        });

        function getDataByPage(){
            // ajax请求
            $.ajax({
                url: 'getDeptByPage',
                type: 'POST',
                data:{'curPage':currentPage,'pageSize':pageCount},
                dataType: 'JSON',
                success: function (data) {
                    // 请求成功，创建表格并填充数据
                    console.log(data);
                    //data显示到tbody里面
                    $("#my_body").empty();
                    var str="";
                    for (var i = 0; i < data.length; i++) {
                        str += "<tr><td>" + ((currentPage - 1) * pageCount + i + 1) + "</td><td>" + data[i].deptno +
                            "</td><td>" + data[i].dname +
                            "</td><td>" + data[i].loc +
                            "</td><td>" + '<button onclick="updateDept(\'' +
                            data[i].deptno + '\',\'' + data[i].dname + '\',\'' + data[i].loc + '\')">编辑</button>' +
                            '<button onclick="delDept(\'' + data[i].deptno + '\')">删除</button></td>' +
                            "</tr>";
                    }
                    $("#my_body").append(str);
                },
                error: function () {
                    alert("服务器异常，请稍后重试.");
                }
            });
        }

        //根据部门id删除部门信息
        function delDept(deptno){
            $.ajax({
                url: 'delDeptById',
                type: 'POST',
                data:{'deptno':deptno},
                dataType: 'JSON',
                success: function (data) {
                    if(data.code>0){
                        getDataByPage();
                    }
                },
                error: function () {
                    alert("删除失败，请稍后重试.");
                }
            });
        }
        //编辑部门的信息
        function updateDept(deptno,dname,loc){
            //编辑功能的实现
            const updateBtn = document.getElementById('OverlayUpdateBtn');
            const updateOverlay = document.getElementById('updateOverlay');
            const overlaySaveBtn = document.getElementById('OverlayRestoreBtn');
            const overlayCancelBtn = document.getElementById('OverlayCancleBtn');
            const overlayClearBtn = document.getElementById('OverlayClearBtn'); // 获取清空按钮

            //点击编辑按钮显示弹窗
            updateOverlay.style.display='flex';
            document.getElementById('updateDeptno').value = deptno;
            document.getElementById('updateDname').value = dname;
            document.getElementById('updateLoc').value = loc;
            // 点击取消按钮时关闭弹窗
            overlayCancelBtn.addEventListener('click', function() {
                updateOverlay.style.display = 'none';
            });

            // 点击清空按钮时清空输入框内容
            overlayClearBtn.addEventListener('click', function() {
                document.getElementById('updateDeptno').value = '';
                document.getElementById('updateDname').value = '';
                document.getElementById('updateLoc').value = '';
            });

            // 点击回复原数据按钮时恢复原先的内容
            overlaySaveBtn.addEventListener('click', function() {
                document.getElementById('updateDeptno').value = deptno;
                document.getElementById('updateDname').value = dname;
                document.getElementById('updateLoc').value = loc;
            });

            // 点击保存按钮时获取输入框的值并关闭弹窗（这里只是简单示例，并未处理保存逻辑）
            updateBtn.addEventListener('click', function() {
                const newDeptno = document.getElementById('updateDeptno').value;
                const newDname = document.getElementById('updateDname').value;
                const newLoc = document.getElementById('updateLoc').value;

                // 检查输入框是否有空值
                if (deptno.trim() === '' || dname.trim() === '' || loc.trim() === '') {
                    alert('请填写完整的部门信息');
                    return; // 如果有空值，不继续执行保存操作
                }
                $.ajax({
                    url: 'updateDept',
                    type: 'POST',
                    data:{'new_deptno':newDeptno,'new_dname':newDname,'new_loc':newLoc,'deptno':deptno},
                    dataType: 'JSON',
                    success: function (data) {
                        if(data.code>0){
                            //成功添加后关闭弹窗
                            updateOverlay.style.display = 'none';
                            getDataByPage()
                        }
                    },
                    error: function () {
                        alert("新建数据时服务异常，请稍后重试.");
                    }
                });
            });
        }



        //新建功能的实现
        // 获取相关元素
        const createBtn = document.getElementById('create_new_btn');
        const overlay = document.getElementById('popupOverlay');
        const saveBtn = document.getElementById('saveBtn');
        const cancelBtn = document.getElementById('cancelBtn');
        const clearBtn = document.getElementById('clearBtn'); // 获取清空按钮


        // 点击新建按钮时显示弹窗
        createBtn.addEventListener('click', function() {
            overlay.style.display = 'flex';
        });

        // 点击取消按钮时关闭弹窗
        cancelBtn.addEventListener('click', function() {
            overlay.style.display = 'none';
        });

        // 点击清空按钮时清空输入框内容
        clearBtn.addEventListener('click', function() {
            document.getElementById('deptNo').value = '';
            document.getElementById('deptName').value = '';
            document.getElementById('deptLoc').value = '';
        });

        // 点击保存按钮时获取输入框的值并关闭弹窗（这里只是简单示例，并未处理保存逻辑）
        saveBtn.addEventListener('click', function() {
            const deptno = document.getElementById('deptNo').value;
            const dname = document.getElementById('deptName').value;
            const loc = document.getElementById('deptLoc').value;

            // 检查输入框是否有空值
            if (deptno.trim() === '' || dname.trim() === '' || loc.trim() === '') {
                alert('请填写完整的部门信息');
                return; // 如果有空值，不继续执行保存操作
            }
            $.ajax({
                url: 'addNewData',
                type: 'POST',
                data:{'deptno':deptno,'dname':dname,'loc':loc},
                dataType: 'JSON',
                success: function (data) {
                    if(data.code>0){
                        //成功添加后关闭弹窗
                        overlay.style.display = 'none';
                        getDataByPage()
                    }else{
                        alert("插入数据失败，请稍后重试.");
                    }
                },
                error: function () {
                    alert("新建数据时服务异常，请稍后重试.");
                }
            });
        });



    </script>
</html>
